class Move{
    //获取到画板
    //获取到鼠标的位置
    /*创建小星星
        -设置小星星的范围
        -设置显示时间
        -移除
    */
    
    constructor(){
        this.div = document.querySelector('.box');
        this.startWidth = 10;
        this.startHeight = 10;
        this.bindMove();
    }
    // bindMove(){
    //     this.div.onmousemove = (e) =>{
    //         let mx = e.pageX - this.div.offsetLeft;
    //         let my = e.pageY - this.div.offsetTop;
    //         this.creatEle(mx,my);
    //     }
    // }
    // //创建拖尾
    // creatEle(mx,my){
    //     const num = getRandom(1,10);
    //     const arr = [];
    //     let url = `./img/${getRandom(1,10)}.png`;
    //     for(let i = 0 ; i < num ; i++){
    //         const img = document.createElement('img');
    //         css(img,'width',this.startWidth + 'px');
    //         css(img,'height',this.startHeight + 'px');
    //         css(img,'position','absolute');
    //         css(img,'left', mx + 'px')
    //         css(img,'top', my + 'px')
    //         img.setAttribute('src',url);
    //         arr.push(img);
    //         this.div.appendChild(img);
    //     }
    //     this.down(arr);
    // }
    // down(arr){
    //     arr.forEach(element => {
    //         animate(element,{top:800,left:getRandom(400,800)},1000,()=>{
    //             this.div.removeChild(element);
    //         })
    //     });
    // }

    bindMove(){
        this.div.onmousemove = (e) =>{
            let mx = e.pageX - this.div.offsetLeft;
            let my = e.pageY - this.div.offsetTop;
            const num = getRandom(1,10);
            const num2 = getRandom(50,100)
            const arr = [];
            let url = `./img/${getRandom(1,10)}.png`;
            for(let i = 0 ; i < num ; i++){
            const img = document.createElement('img');
            css(img,'width',this.startWidth + 'px');
            css(img,'height',this.startHeight + 'px');
            css(img,'position','absolute');
            css(img,'left', mx + 'px')
            css(img,'top', my + 'px')
            img.setAttribute('src',url);
            arr.push(img);
            this.div.appendChild(img);
        }
        arr.forEach(element => {
            animate(element,{top: my + num2},1000,()=>{
                this.div.removeChild(element);
            })
        });
        }
    }

}